<script setup lang="ts">
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { onMounted, ref } from 'vue';
import { $t } from '@/locales';
import { useAuthStore } from '@/store/modules/auth';
interface Emits {
  (emit: 'change', value: any): void;
}
const emit = defineEmits<Emits>();
type RangeValue = [Dayjs, Dayjs];
// 设置默认值为上个月第一天到今天
const dateRange = ref<RangeValue>([dayjs().add(-1, 'month'), dayjs()]);

defineOptions({
  name: 'HeaderBanner'
});

const authStore = useAuthStore();

const rangePresets = ref([
  { label: '上周', value: [dayjs().add(-7, 'd'), dayjs()] },
  { label: '上月', value: [dayjs().add(-1, 'month'), dayjs()] },
  { label: '前三个月', value: [dayjs().add(-3, 'month'), dayjs()] },
  { label: '去年', value: [dayjs().add(-1, 'year'), dayjs()] }
]);
const onRangeChange = (value: RangeValue | [string, string], dateString: [string, string]) => {
  if (value) {
    emit('change', dateString);
  } else {
    console.log('Clear');
  }
};
onMounted(() => {
  onRangeChange(dateRange.value, [dateRange.value[0].format('YYYY-MM-DD'), dateRange.value[1].format('YYYY-MM-DD')]);
});
</script>

<template>
  <ACard :bordered="false" class="card-wrapper">
    <ARow :gutter="[13, 13]" align="middle">
      <ACol :span="24" :md="18">
        <div class="flex-y-center">
          <div class="size-72px shrink-0 overflow-hidden rd-1/2">
            <icon-twemoji:cityscape class="size-full text-60px" />
            <!-- <img src="@/assets/imgs/soybean.jpg" class="size-full" /> -->
          </div>
          <div class="pl-12px">
            <h3 class="text-18px font-semibold">
              {{ $t('page.home.greeting', { userName: authStore.userInfo.userName }) }}
            </h3>
            <p class="text-#999 leading-30px">{{ $t('page.home.weatherDesc') }}</p>
          </div>
        </div>
      </ACol>
      <ACol :span="24" :md="6">
        <div class="w-full">
          <div
            class="mb-2 flex items-center justify-end gap-2 text-right text-sm text-gray-700 font-medium dark:text-gray-300"
          >
            报表统计时间段
            <AButton
              size="small"
              class="flex items-center justify-center p-0"
              @click="onRangeChange(dateRange, [dateRange[0].format('YYYY-MM-DD'), dateRange[1].format('YYYY-MM-DD')])"
            >
              <icon-ri:refresh-line class="h-4 w-4" />
            </AButton>
          </div>
          <ARangePicker v-model:value="dateRange" style="width: 100%" :presets="rangePresets" @change="onRangeChange" />
        </div>
      </ACol>
    </ARow>
  </ACard>
</template>

<style scoped></style>
